<template>
    <div class="row">
        <AppPageTopInfo title="我的客户" :subTitle="subTitle">
            <template #btn>
                <button class="btn-create" @click="openDialog">创建客户</button>
            </template>
        </AppPageTopInfo>
    </div>
    <AppPageContent ref="refPageContent" :opApi="customApi">
        <template v-slot="{ item }">
            <div class="box p-5">
                <div class="student-img">
                    <AppImg :src="item.img" class="rounded-full"></AppImg>
                </div>
                <div class="text-center">
                    <h5 class="text-xl fw-bold mb-2 mt-4 chover">
                        <router-link :to="'/custom-detail?id=' + item.id">
                            {{ item.title }}
                        </router-link>
                    </h5>
                    <h6>{{ item.telephone }}</h6>
                </div>
            </div>
        </template>
    </AppPageContent>

    <AppDialogForm @save="save" ref="refDialog">
        <form action="#">
            <div class="row">
                <div class="col-lg-12">
                    <div class="form-group">
                        <label class="form-control-label">客户名称</label>
                        <input type="text" v-model="formData.title" class="form-control" placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">位置</label>
                        <input type="text" v-model="formData.name" class="form-control" placeholder="用于登录">
                    </div>
                    <!-- <div class="form-group">
                                        <label class="form-control-label">手机号</label>
                                        <input type="text" v-model="formData.telephone" class="form-control" placeholder="请输入手机号">
                                    </div> -->
                    <div class="form-group">
                        <label class="form-control-label">类型</label>

                        <div class="wallet-method">
                            <label class="radio-inline custom_radio me-4">
                                <input type="radio" name="optradio" v-model="formData.type" value="training">
                                <span class="checkmark"></span> 培训结构
                            </label>
                            <label class="radio-inline custom_radio me-4">
                                <input type="radio" name="optradio" v-model="formData.type" value="school">
                                <span class="checkmark"></span> 学校
                            </label>
                            <label class="radio-inline custom_radio">
                                <input type="radio" name="optradio" v-model="formData.type" value="studio">
                                <span class="checkmark"></span> 个人工作室
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">有效期</label>
                        <input type="text" class="form-control" v-model="formData.endAt" placeholder="有效期">
                    </div>
                </div>

            </div>
        </form>
    </AppDialogForm>
</template>

<script setup>
import customApi from '@/api/customApi'

const total = ref(0)
const subTitle = computed(() => {
    return `您累积服务客户：13，正在服务的客户：${total.value}`
})

const formData = reactive({
    title: '测试',
    telephone: '13612345678',
    type: 'training',
    endAt: '2025-01-01' // 截止时间

})
const refDialog = ref(null)
const openDialog = () => {
    refDialog.value.open()
}
const refPageContent = ref(null)
const save = async () => {
    await customApi.add(formData)
    refDialog.value.close()
    refPageContent.value.search()
}
</script>